
<template>
  <div class="container">
    <div style="display: flex;justify-content: center">
      <t-input placeholder="搜索你感兴趣的内容" style="border-radius: 20px;width: 400px">
        <template #suffixIcon>
          <div style="cursor: pointer">
            <t-divider layout="vertical" />
            <search-icon :style="{ cursor: 'pointer' ,color: 'white',fontSize: '18px', marginRight: '5px' }" />
            <span  style="font-weight: bolder">搜索</span>
          </div>

        </template>
      </t-input>
    </div>
    <div class="right" >
      <div style="display: flex;">
        <div class="btn-group">
          <span>
           <svg t="1743177653090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38994" width="200" height="200"><path d="M364.928 107.52c-27.04-1.824-53.632 3.04-76.928 16.48-31.072 17.92-51.776 48.544-62.88 83.84-11.104 35.2-13.664 75.84-9.6 120.224 0.384 4.48 1.184 9.184 1.728 13.76-4.224 1.792-8.704 3.456-12.8 5.376-40.448 18.656-74.336 41.184-99.328 68.416C80.16 442.88 64 476.096 64 512c0 35.872 16.16 69.12 41.12 96.384 24.96 27.232 58.88 49.76 99.328 68.416 4.096 1.92 8.576 3.584 12.8 5.376-0.544 4.576-1.344 9.28-1.76 13.76-4.032 44.384-1.472 84.992 9.632 120.256 11.104 35.264 31.808 65.856 62.88 83.808 31.072 17.92 67.904 20.576 104 12.576 36.096-8 72.544-26.144 108.928-51.84 3.68-2.56 7.36-5.6 11.072-8.352 3.68 2.752 7.36 5.76 11.072 8.352 36.384 25.696 72.832 43.84 108.928 51.84 36.096 8 72.928 5.376 104-12.576 31.072-17.92 51.776-48.544 62.88-83.84 11.104-35.2 13.664-75.84 9.6-120.224-0.384-4.48-1.184-9.184-1.728-13.76 4.224-1.792 8.704-3.456 12.8-5.376 40.448-18.656 74.336-41.184 99.328-68.416C943.84 581.12 960 547.904 960 512c0-35.872-16.16-69.12-41.12-96.384-24.96-27.232-58.88-49.76-99.328-68.416-4.096-1.92-8.576-3.584-12.8-5.376 0.544-4.576 1.344-9.28 1.76-13.76 4.032-44.384 1.472-84.992-9.632-120.256-11.104-35.264-31.808-65.856-62.88-83.808-31.072-17.92-67.904-20.576-104-12.576-36.096 8-72.544 26.144-108.928 51.84-3.68 2.56-7.36 5.6-11.072 8.352-3.68-2.752-7.36-5.76-11.072-8.352-36.384-25.696-72.832-43.84-108.928-51.84a179.968 179.968 0 0 0-27.072-3.936z m-4.16 63.744c5.44 0.384 11.232 1.28 17.408 2.688 24.192 5.344 53.152 18.912 83.712 40.16a738.048 738.048 0 0 0-74.4 82.336 738.336 738.336 0 0 0-108.352 23.168c-3.136-37.056-0.448-68.928 6.976-92.544 7.648-24.192 19.04-39.04 33.888-47.648 11.136-6.4 24.384-9.408 40.736-8.16z m302.496 0c16.32-1.248 29.6 1.76 40.736 8.16 14.848 8.576 26.24 23.456 33.888 47.648 7.424 23.616 10.112 55.488 6.976 92.544a738.336 738.336 0 0 0-108.352-23.168 738.048 738.048 0 0 0-74.4-82.336c30.56-21.248 59.52-34.816 83.712-40.16 6.176-1.376 11.968-2.304 17.44-2.688zM512 254.688c11.232 10.4 22.464 21.952 33.696 34.048A947.776 947.776 0 0 0 512 288c-11.36 0-22.528 0.352-33.696 0.736 11.2-12.096 22.464-23.648 33.696-34.048zM512 352c30.88 0 60.8 1.824 89.568 4.864A846.688 846.688 0 0 1 650.56 432c15.424 26.72 28.8 53.536 40.576 80a846.624 846.624 0 0 1-40.576 80 846.688 846.688 0 0 1-48.992 75.136c-28.8 3.04-58.688 4.864-89.568 4.864-30.88 0-60.8-1.824-89.568-4.864A846.688 846.688 0 0 1 373.44 592c-15.424-26.72-28.8-53.536-40.576-80 11.744-26.464 25.152-53.28 40.576-80s31.968-51.744 48.992-75.136A846.72 846.72 0 0 1 512 352z m-176.512 19.2c-5.92 9.44-11.808 18.944-17.472 28.8a948.16 948.16 0 0 0-16.192 29.568 627.552 627.552 0 0 1-12.64-46.208c14.624-4.512 30.24-8.512 46.304-12.16z m353.024 0c16.064 3.648 31.68 7.648 46.304 12.16-3.392 14.944-7.776 30.464-12.64 46.208a948.128 948.128 0 0 0-16.192-29.568 948.736 948.736 0 0 0-17.472-28.8zM228.928 406.496c8.192 34.08 19.488 69.44 34.144 105.504a737.824 737.824 0 0 0-34.144 105.504c-33.632-15.84-59.904-34.144-76.608-52.384C135.2 546.432 128 529.152 128 512c0-17.152 7.2-34.432 24.32-53.12 16.704-18.24 42.976-36.544 76.608-52.384z m566.144 0c33.632 15.84 59.904 34.144 76.608 52.384 17.12 18.688 24.32 35.968 24.32 53.12 0 17.152-7.2 34.432-24.32 53.12-16.704 18.24-42.976 36.544-76.608 52.384A737.824 737.824 0 0 0 760.928 512c14.656-36.064 25.952-71.424 34.144-105.504zM512 416c-52.64 0-96 43.36-96 96s43.36 96 96 96 96-43.36 96-96-43.36-96-96-96z m0 64c18.048 0 32 13.952 32 32 0 18.048-13.952 32-32 32-18.048 0-32-13.952-32-32 0-18.048 13.952-32 32-32z m-210.176 114.432c5.216 9.856 10.496 19.712 16.16 29.568 5.696 9.856 11.584 19.36 17.504 28.8-16.064-3.648-31.68-7.648-46.304-12.16 3.392-14.944 7.776-30.464 12.64-46.208z m420.352 0c4.864 15.744 9.28 31.264 12.64 46.208-14.624 4.512-30.24 8.512-46.304 12.16 5.92-9.44 11.808-18.944 17.504-28.8 5.664-9.856 10.944-19.712 16.16-29.568zM279.136 704.384c33.6 9.92 69.856 17.856 108.352 23.168 23.904 30.72 48.96 58.176 74.4 82.336-30.56 21.248-59.52 34.816-83.712 40.16-24.736 5.504-43.328 3.072-58.176-5.472-14.848-8.576-26.24-23.456-33.888-47.648-7.424-23.616-10.112-55.488-6.976-92.544z m465.728 0c3.136 37.056 0.448 68.928-6.976 92.544-7.648 24.192-19.04 39.04-33.888 47.648-14.848 8.544-33.44 10.976-58.176 5.472-24.192-5.344-53.152-18.912-83.712-40.16a738.048 738.048 0 0 0 74.4-82.336 738.336 738.336 0 0 0 108.352-23.168z m-266.56 30.88c11.168 0.384 22.336 0.736 33.696 0.736s22.528-0.352 33.696-0.736c-11.2 12.096-22.464 23.648-33.696 34.048a626.72 626.72 0 0 1-33.696-34.048z" p-id="38995" fill="#ffffff"></path></svg>
          </span>
          <span>关于</span>
        </div>
        <div class="btn-group">
          <span>
            <svg t="1743177270080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34452" width="200" height="200"><path d="M638.24 959.78c-20.29 0-40.18-7.11-56.23-20.57L453.84 831.47 316.06 941.39c-13.51 10.8-32.05 12.81-47.55 5.25-15.52-7.59-25.32-23.41-25.14-40.71l2.51-244.39L127.07 556.8c-21.69-18.21-33.16-46.92-29.91-76.1 3.26-29.21 20.79-54.65 46.89-68.12L800.74 74.06c31.13-16.05 67.38-12.25 94.53 9.84 27.17 22.12 38.21 56.84 28.81 90.59L722.76 895.7c-8.05 28.81-29.93 51.29-58.5 60.12-8.57 2.65-17.34 3.96-26.02 3.96zM454.58 728.83c10.25 0 20.48 3.5 28.81 10.49L637.33 868.7l198.79-712.13-648.47 334.27 132.81 117.07c9.77 8.59 15.3 21.03 15.17 34.04l-1.75 170.68 92.78-74.02a44.674 44.674 0 0 1 27.92-9.78z" fill="#ffffff" p-id="34453"></path><path d="M460.42 594.64c-11.46 0-22.91-4.37-31.66-13.12-17.49-17.49-17.49-45.84 0-63.31l167.53-167.48c17.49-17.49 45.82-17.49 63.31 0s17.49 45.84 0 63.31L492.07 581.52c-8.74 8.75-20.2 13.12-31.65 13.12z" fill="#ffffff" p-id="34454"></path></svg>
          </span>
          <span>投稿</span>
        </div>
      </div>
      <div v-if="userStore.token"
      @mouseover="handleUserHover"
      @mouseout="handleUserLeave">
        <t-avatar
            size="large"
            style="cursor: pointer;"
            :image="userStore.avatar" >
        </t-avatar>
        <transition name="animate__animated animate__bounce" appear enter-active-class="animate__fadeInRight"
                    leave-active-class="animate__fadeOutRight">
          <div class="user-container"
               @mouseover="handleUserHover"

               v-if="userDetailShow" style="">

            <div style="display: flex;margin-bottom: 15px">
              <t-avatar
                  size="large"
                  style="cursor: pointer;margin-right: 15px"
                  :image="userStore.avatar" >
              </t-avatar>
              <div style="display:flex; flex-direction: column;justify-content: space-between;">
                <span style="font-size: 14px;color: white;">{{userStore.nickName}}</span>
                <div style="display: flex;">
                  <span style="margin-right: 20px">关注 888</span>
                  <span>粉丝 888</span>
                </div>
              </div>
            </div>

            <ul class="menu-list">
              <li class="menu-item">
                <div style="margin-bottom: 15px;display: flex;">
                  <svg t="1743218825960" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6684" width="200" height="200"><path d="M692.586667 103.893333c25.173333-1.706667 50.346667-1.706667 75.413333 0.32 14.4 6.506667 29.653333 8.32 45.226667 9.706667 1.706667 2.026667 5.12 6.186667 6.933333 8.32 94.4 31.466667 162.026667 129.6 157.12 229.226667 4.16 80.96-42.346667 153.173333-92.48 212.693333-105.066667 108.8-213.76 214.08-320.533333 321.28-19.093333 16.533333-35.093333 46.293333-64.853334 38.293333C393.173333 811.413333 277.546667 708.373333 170.666667 596.48 102.933333 533.333333 43.84 448.64 47.146667 352.213333c-5.12-119.253333 90.986667-229.76 208.533333-245.44 21.866667-5.973333 44.8-4.586667 67.2-3.52 16.853333 6.08 34.453333 9.6 52.053333 12.266667 56.64 21.013333 103.573333 59.733333 137.706667 109.226667 41.6-62.4 106.346667-106.026667 179.946667-120.853334m7.573333 73.813334c-2.453333 16.96-2.666667 34.026667-0.64 51.093333 72.64-3.306667 147.946667 37.226667 167.36 110.826667 1.813333 14.933333 1.92 30.4 6.933333 44.8 14.72 11.2 32.96 7.146667 49.6 3.84 21.973333-122.773333-103.573333-235.84-223.253333-210.56z" fill="#DB4100" p-id="6685"></path><path d="M700.16 177.706667c119.68-25.28 245.226667 87.786667 223.253333 210.56-16.64 3.306667-34.88 7.36-49.6-3.84-5.013333-14.4-5.12-29.866667-6.933333-44.8-19.413333-73.6-94.72-114.133333-167.36-110.826667-2.026667-17.066667-1.813333-34.133333 0.64-51.093333z" fill="#FFFFFF" p-id="6686"></path></svg>
                  <span style="letter-spacing: 1px">我的喜欢</span>
                </div>
                <ul class="item-video-list">
                  <li v-for="item in 3" :key="item.id">
                    <video style="" src="https://files.manuscdn.com/assets/video/Manus-Chinese-2k-compressed-v2.mp4"></video>
                    <span style=" text-overflow: ellipsis;overflow: hidden;  white-space: nowrap;  ">{{'Koala致力于实现全任务场景下自组织、自编程、自部署，加速AGI普惠人类'}}</span>
                  </li>
                </ul>
              </li>

              <li class="menu-item">
                <div style="margin-bottom: 15px;display: flex;">
                  <svg t="1743219044712" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8367" width="200" height="200"><path d="M871.0656 448.1536c18.2784-17.8176 24.7296-43.9808 16.8448-68.2496s-28.4672-41.6256-53.76-45.312l-172.9024-25.1392c-5.0176-0.7168-9.3184-3.8912-11.5712-8.3968l-77.312-156.672c-11.3152-22.8864-34.1504-37.12-59.6992-37.12-25.4976 0-48.384 14.2336-59.6992 37.12l-77.312 156.672c-2.2528 4.5568-6.5536 7.68-11.5712 8.3968l-172.9024 25.1392c-25.2416 3.6864-45.8752 21.0432-53.76 45.312-7.8848 24.2688-1.4336 50.432 16.8448 68.2496l125.1328 121.9584c3.6352 3.5328 5.2736 8.6016 4.4032 13.6192l-29.5424 172.1856c-4.3008 25.1392 5.8368 50.1248 26.4704 65.1264a66.1504 66.1504 0 0 0 39.0656 12.8c10.5984 0 21.1968-2.56 31.0272-7.7312l154.6752-81.3056c4.4544-2.3552 9.8304-2.3552 14.2848 0l154.6752 81.3056c22.5792 11.8784 49.4592 9.9328 70.0928-5.0688s30.7712-39.936 26.4704-65.0752l-29.5424-172.2368c-0.8704-4.9664 0.8192-10.0864 4.4032-13.6192l125.184-121.9584z" fill="#FFB802" p-id="8368"></path><path d="M512.6656 782.3872c-14.1312 0-25.6 11.4688-25.6 25.6v84.6848c0 14.1312 11.4688 25.6 25.6 25.6s25.6-11.4688 25.6-25.6v-84.6848c0-14.1312-11.4176-25.6-25.6-25.6zM895.0272 608.7168l-78.6432-31.4368a25.5488 25.5488 0 0 0-33.28 14.2848c-5.2736 13.1072 1.1264 28.0064 14.2848 33.28l78.6432 31.4368c3.1232 1.2288 6.3488 1.8432 9.472 1.8432 10.1888 0 19.7632-6.0928 23.7568-16.0768 5.2736-13.2096-1.1264-28.1088-14.2336-33.3312zM207.616 577.28l-78.6432 31.4368a25.6512 25.6512 0 0 0-14.2848 33.28 25.53344 25.53344 0 0 0 33.2288 14.2336l78.6432-31.4368a25.6512 25.6512 0 0 0 14.2848-33.28c-5.1712-13.1072-20.0704-19.5072-33.2288-14.2336zM295.936 172.1856a25.58976 25.58976 0 0 0-35.84-5.2224c-11.3664 8.448-13.6704 24.4736-5.2736 35.84l50.5856 67.9424a25.50784 25.50784 0 0 0 20.5312 10.2912c5.3248 0 10.6496-1.6384 15.2576-5.0688 11.3664-8.448 13.6704-24.4736 5.2736-35.84L295.936 172.1856zM761.0368 166.912a25.6 25.6 0 0 0-35.84 5.2736l-50.5856 67.9424a25.6 25.6 0 0 0 5.2736 35.84c4.608 3.4304 9.9328 5.0688 15.2576 5.0688 7.8336 0 15.5136-3.584 20.5312-10.3424l50.5856-67.9424a25.5488 25.5488 0 0 0-5.2224-35.84z" fill="#FFB802" p-id="8369"></path></svg>
                  <span style="letter-spacing: 1px">我的收藏</span>
                </div>
                <ul class="item-video-list">
                  <li v-for="item in 3" :key="item.id">
                    <video style="" src="https://files.manuscdn.com/assets/video/Manus-Chinese-2k-compressed-v2.mp4"></video>
                    <span style=" text-overflow: ellipsis;overflow: hidden;  white-space: nowrap;  ">{{'Koala致力于实现全任务场景下自组织、自编程、自部署，加速AGI普惠人类'}}</span>
                  </li>
                </ul>
              </li>

              <li class="menu-item">
                <div style="margin-bottom: 15px;display: flex;">
                  <svg t="1743219148627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11115" width="200" height="200"><path d="M137.31 635.345L62.835 530.618c-11.636-11.636-18.618-25.6-18.618-41.89-2.327-27.928 20.946-48.873 46.546-48.873l186.181-2.328c27.928 0 51.2 23.273 48.873 51.2-2.327 13.964-6.982 27.928-18.618 39.564l-79.127 107.054c-25.6 23.273-65.164 23.273-90.764 0z" fill="#078210" p-id="11116"></path><path d="M560.873 930.91c-109.382 0-211.782-41.892-290.91-116.365-13.963-13.963-13.963-34.909 0-48.872 13.964-13.964 34.91-13.964 48.873 0C384 828.509 470.11 863.418 560.873 863.418c95.418 0 186.182-37.236 251.345-107.054 67.491-69.819 100.073-160.582 95.418-258.328-9.309-176.872-153.6-323.49-332.8-332.8-97.745-4.654-188.509 30.255-258.327 95.419C246.691 328.145 209.455 416.582 209.455 512c0 18.618-16.291 34.91-34.91 34.91s-34.909-16.292-34.909-34.91c0-116.364 46.546-223.418 130.328-302.545C353.745 130.327 463.127 88.436 579.49 93.09 793.6 102.4 968.145 276.945 977.455 491.055c4.654 116.363-34.91 225.745-116.364 309.527-76.8 83.782-183.855 130.327-300.218 130.327z" fill="#078210" p-id="11117"></path><path d="M649.31 674.91c-9.31 0-18.62-2.328-23.274-9.31l-76.8-79.127a116.13 116.13 0 0 1-34.909-83.782v-153.6c0-18.618 16.291-34.91 34.91-34.91s34.908 16.292 34.908 34.91v153.6c0 9.309 2.328 23.273 13.964 34.909l79.127 79.127c13.964 13.964 13.964 34.91 0 48.873-9.309 6.982-18.618 9.31-27.927 9.31z" fill="#078210" p-id="11118"></path></svg>
                  <span style="letter-spacing: 1px">观看历史</span>
                </div>
                <ul class="item-video-list">
                  <li v-for="item in 3" :key="item.id">
                    <video style="" src="https://files.manuscdn.com/assets/video/Manus-Chinese-2k-compressed-v2.mp4"></video>
                    <span style=" text-overflow: ellipsis;overflow: hidden;  white-space: nowrap;  ">{{'Koala致力于实现全任务场景下自组织、自编程、自部署，加速AGI普惠人类'}}</span>
                  </li>
                </ul>
              </li>

            </ul>
            <t-divider style="margin: 10px 0" />
            <ul style="display: flex">
              <li style="display: flex;align-items: center;padding: 10px;font-size: 13px;cursor: pointer" @click="userStore.logout()">
                <svg t="1743219261604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12930" width="200" height="200"><path d="M357.5 81c-21.263 0-38.5 17.229-38.5 38.482s17.237 38.482 38.5 38.482h400.4c55.284 0 100.1 44.796 100.1 100.054v507.964c0 55.258-44.816 100.054-100.1 100.054H357.5c-21.263 0-38.5 17.229-38.5 38.482S336.237 943 357.5 943h400.4c97.81 0 177.1-79.254 177.1-177.018V258.018C935 160.254 855.71 81 757.9 81H357.5z m-231 384.821h364.952l-143.559-143.16c-15.053-15.01-15.081-39.376-0.063-54.422 15.018-15.045 39.394-15.073 54.447-0.063l177.95 177.456c33.17 33.077 33.17 86.789 0 119.867l-177.95 177.455c-15.053 15.011-39.429 14.983-54.447-0.063-15.018-15.046-14.99-39.411 0.063-54.422l146.089-145.683H126.5c-21.263 0-38.5-17.229-38.5-38.482 0-21.254 17.237-38.483 38.5-38.483z" p-id="12931" fill="#c0c0d6"></path></svg>
                <span>退出登录</span>
              </li>


            </ul>
          </div>
        </transition>
      </div>
      <div v-else>
        <t-button theme="danger" size="" @click="loginDialogStore.isShow = true">
          <template #icon>
            <UserCircleFilledIcon  />
          </template>
          登录
        </t-button>
      </div>

    </div>
  </div>
</template>
<script setup>
import {useLoginDialogStore} from '@/stores/modules/loginDialog.js'
const loginDialogStore = useLoginDialogStore();
import {useUserStore} from "@/stores/modules/user.js";
const userStore = useUserStore();
import {ref} from "vue";
import {UserCircleFilledIcon , SearchIcon } from "tdesign-icons-vue-next";
const userDetailShow = ref(false);
const options = ref([''])

let timeId
const handleUserHover = () => {
  if (timeId) {
    clearTimeout(timeId);
    timeId = null;
  }
  userDetailShow.value = true;
};

const handleUserLeave = () => {
  if (timeId) clearTimeout(timeId);
  timeId = setTimeout(() => {
    userDetailShow.value = false;
  }, 500);
};

</script>

<style scoped>
::v-deep(.t-input,.t-input--suffix) {
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(245,245,245 , 0.1);
}

.btn-group .icon {
  transition: 0.3s;
}

.btn-group:hover .icon {
  transform: translateY(-5px);
}


.menu-item .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.item-video-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.item-video-list li {
  color: #c0c0d6 ;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  overflow: hidden;
}

.item-video-list video {
  width: 100%;
  cursor: pointer;
  height: 130px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 4px;
  transition: 0.3s;
}

.item-video-list video:hover {
  transform: translateY(-3px);
}

.menu-item {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  background-color: rgb(51, 52, 63);
  box-sizing: border-box;
  padding: 12px;
  border-radius: 15px;
  transition: 0.3s;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
}

.menu-item:hover {
  height: 210px;
}

.menu-list {
  display: flex;
  flex-direction: column;
  color: white;
}

.user-container {
  position: absolute;
  background-color: rgb(37, 38, 50);
  padding: 15px;
  top: 8%;
  right: 1%;
  color: #c0c0d6 ;
  z-index: 99;
  border-radius: 10px;
  width: 20%;
  display: flex;
  flex-direction: column;
}

.icon {
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
}

.right {
  display: flex; align-items: center; justify-content: center;
  color: #c0c0d6;
}

.right>* {
  margin-right: 20px;
}

.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 20px;
}

.container {
  max-width: 20000px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 1px;
  padding-left: 30%;
  box-sizing: border-box;

}
</style>
